<template>
  <el-form ref="customerform" :model="customer" :rules="rules" label-width="120px" style="width: 90%;margin:5% ">
    <el-row>
      <el-col :span="12">
      <el-form-item label="客户代码" required prop="customerCode">
        <el-input v-model="customer.customerCode" :disabled=!!customer.pkid></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="customer.customerName"></el-input>
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
      <el-form-item label="行业类型" required prop="industryCode">
        <el-input v-model="customer.industryCode"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="省" prop="province">
        <el-input v-model="customer.province"></el-input>
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
      <el-form-item label="市" prop="city">
        <el-input v-model="customer.city"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="区" prop="area">
        <el-input v-model="customer.area"></el-input>
      </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="地址" prop="address">
      <el-input v-model="customer.address"></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="customer.contact"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="联系电话" prop="telephone">
        <el-input v-model="customer.telephone"></el-input>
      </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="customer.email"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio-group v-model="customer.isdeleted">
        <el-radio :label="'1'">在用</el-radio>
        <el-radio :label="'0'">停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<style>
</style>
<script>
  import customerApi from '../../../api/crm/customerApi'
  import {vEmail, vPhone} from '../../../common/js/validate'

  export default{
    data () {
      return {
        customer: {},
        rules: {
          customerCode: [
            { required: true, message: '请输入客户代码', trigger: 'blur' },
            { max: 10, message: '长度在不超过 10 个字符', trigger: 'blur' }
          ],
          customerName: [
            { required: true, message: '请输入客户名称', trigger: 'blur' },
            { max: 20, message: '长度在不超过 20 个字符', trigger: 'blur' }
          ],
          telephone: [
            { validator: vPhone, trigger: 'blur' }
          ],
          email: [
            { validator: vEmail, trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      if (this.$route.params.id !== 'create') {
        customerApi.getCustomerById(this.$route.params.id).then(resp => {
          this.customer = resp.body.data
        })
      }
    },
    methods: {
      onSubmit () {
        this.$refs.customerform.validate(valid => {
          if (valid) {
            customerApi.saveCustomer(this.customer).then((data) => {
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      },
      cancel () {
        this.$router.push('/customer')
      }
    }
  }
</script>
